<template>
  <div cl="" :class="{infoCheck:check,info}">
    {{info}}
    <span @click="close">X</span>
  </div>
</template>
<script setup>
defineProps({
  info:String,
  check:Boolean
})
const emits = defineEmits(['remove']);
const close=()=>{
  emits("remove")
  console.log("关闭")
}
</script>
<style scoped>
.info{
  position: relative;
  transition: .2s;
  cursor: pointer;
  border: 1px solid #e4e7ed;
  padding: 5px 25px;
  font-size: 12px;
  color: #333;
  border-radius: 3px 3px 0px 0px;
}
.info:hover{
  padding-right: 30px;
  color: #409EFF;
}
.info:hover>span{
  right: 12px;
  transform: scale(.9);
}
span{
  color: #333;
  transition: .2s;
  position: absolute;
  right: 3px;
  transform: scale(0);
}
div{
  position: relative;
}
.infoCheck{
  color: #409EFF;

}
</style>